{extend name="./template/default/pc/pub/base.html" /}
{block name="seo"}
<title>个人书架-{$site_name}</title>
{/block}
{block name="content"}
<main class="container mt30 mb20 overflow-Show clearfix" style="min-height:750px;">
    {include file="./template/default/pc/pub/uc_menu.html"}
    <article class="article-main pull-right">
        <section class="box">
            <header class="box-header">
                <span class="title">我的书架</span>
                <ul class="box-simple-tabs">
                    <li><a href="/bookshelf">我的收藏</a></li>
                    <li><a class="active" href="/history">阅读记录</a></li>
                </ul>
                <div class="pull-right">
                    <a href="#" class="more js_edit_booklist_btn">
                        <i class="icon icon-box mr5"></i>整理阅读历史</a>
                    <div href="#" class="box-booklist-edit-head" style="display: none">
                        <span>
                                <button id="book_del" type="button" class="del-btn">删除</button>
                            </span>
                        <input id="url_param" type="hidden" value="delhistory">
                        <span>
                           <button type="button" class="finish-btn js_esc_booklist_btn">完成</button>
                        </span>
                    </div>
                </div>
            </header>
            <div class="box-body">
                <div class="bg-gray box-sub-head clearfix">
                    <dl class="box-head-sort pull-left">
                        <dt>排序:</dt>
                        <dd style="cursor: pointer;color: #fd113a;" data-sort="1">未读更新<i class="icon icon-d-caret"></i>
                        </dd>
                        <dd style="cursor: pointer;" data-sort="3">更新时间<i class="icon icon-d-caret"></i></dd>
                        <dd style="cursor: pointer;" data-sort="6">阅读时间<i class="icon icon-d-caret"></i></dd>
                    </dl>
                    <div class="pull-right">
                        <span class="search-input">
                            <input name="title" type="text" class="" value="" placeholder="请输入作品名称">
                            <button type="button" name="btnsearch">
                                <i class="icon icon-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="mt20" id="app">
                    <ul class="mh-list col7" v-for="(item, index) in books" :key="index">
                        <li>
                            <div class="mh-item">
                                <a class="mh-cover" v-bind:style="{'background-image': 'url(' + item.cover_url + ')'}"
                                   v-bind:href="'/{$book_ctrl}/' + item.param">
                                    <span class="tag  mh-tag">{{item.end}}</span>
                                    <span class="read-section">{{item.last_time}}更新</span>
                                    <span v-bind:mid="item.book_id" class="edit-state">
                                        <i class="icon icon-ok"></i>
                                    </span>
                                </a>
                                <div class="mh-item-detali">
                                    <h2 class="title" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                        <a  v-bind:href="'/{$book_ctrl}/' + item.param">{{item.book_name}}</a>
                                    </h2>
                                    <p class="chapter" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                        <span>最近阅读</span>
                                        <a v-bind:href="'/{$chapter_ctrl}/' + item.chapter_id" target="_blank">{{item.chapter_name}}</a>
                                    </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <footer class="mt20">
                <div class="page-pagination pull-right mt20">
                    <ul>

                    </ul>
                </div>
            </footer>
        </section>
    </article>
    <input id="hidCount" type="hidden" value="0">
</main>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                books: [],
            }
        },
        created: function () {
            let value = localStorage.getItem('xwx_historys');
            console.log(value)
            if (value != undefined && value != null) {
                let history = JSON.parse(value);
                for (let i = 0; i < history.length; i++) {
                    let item = localStorage.getItem(history[i]);
                    if (item != undefined && item != null ) {
                        let bookInfo = JSON.parse(item); //拿到缓存对象
                        this.books.push(bookInfo);
                    }
                }
            }
        }
    })
</script>
<script>
    $(document).ready(function () {
        // 选择
        $('span.edit-state').click(function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
            var $item = $(this)
            $item.hasClass('active') ? $item.removeClass('active') : $item.addClass('active')
        });


        // 显
        $('.js_edit_booklist_btn').click(function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
            $(this).hide();
            $('.box-booklist-edit-head').show();
            $('span.edit-state').show();
        })
        // 隐
        $('.js_esc_booklist_btn').click(function (ev) {
            ev.stopPropagation();
            ev.preventDefault();
            $('.box-booklist-edit-head').hide();
            $('.js_edit_booklist_btn').show();
            $('span.edit-state').removeClass('active').hide();
            $('.js_allsel_checkbox').prop('checked', false);
        })

        $("#book_del").click(function () {
            var arr = $('span.edit-state.active');
            if (arr.length > 0) {
                $(arr).map(function () {
                    localStorage.removeItem('manhua_' + $(this).attr('mid'));
                    let value = localStorage.getItem('xwx_historys');
                    if (value === undefined || value === null) {

                    } else {
                        let history = JSON.parse(value);
                        for (let i = 0; i < history.length; i++) {
                            if (history[i] === 'manhua_' + $(this).attr('mid')){
                                history.slice(i, 1);
                            }
                        }
                        localStorage.setItem('xwx_historys', JSON.stringify(history));
                    }
                });
            } else {
                ShowDialog("请选择要删除的收藏或历史记录");
            }
            setTimeout(function () {
                location.reload();
            },2);
        });
    })
</script>
{/block}